<template>
	<view>
		<!-- <view>
			<view class="example-body box">
				<button class="button" type="primary" @click="toggle('left')"><text
						class="button-text">选择其他地址</text></button>
			</view>
		</view> -->
		<view>
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<text class="text">
						<uni-table ref="table" border stripe type="" emptyText="暂无更多数据"
							@selection-change="selectionChange">
							<uni-tr>
								<uni-th width="204" align="center">地址</uni-th>
							</uni-tr>
							<uni-tr v-for="item in addrList" :key="item.id">
								<uni-td>
									<radio :value="item.id" :checked="selectedId === item.id"
										@click="selectRow(item.id)">
									</radio>
									{{ item.province }}&nbsp;{{item.city}}&nbsp;{{item.county}}&nbsp;{{item.detail}}
									<br>
									{{item.addressName}} &nbsp;{{item.addresstel}}
								</uni-td>
							</uni-tr>
						</uni-table>
					</text>
				</view>
			</uni-popup>
		</view>
		<view class="addressPart" @click.native="selectedUserAddr" @click="toggle('left')">
			<view class="addInner1">
				<view class="text1">{{address.province}} {{address.city}} {{address.county}} {{address.detail}}</view>
				<view class="text2">{{address.addressName}}&nbsp;{{address.addresstel}}</view>
			</view>
			<view class="addInner2">
				<uni-icons type="right" size="30"></uni-icons>
			</view>
		</view>
		<view style="margin-top: 25rpx;">
			<uni-section title="支付方式" type="line">
				<radio-group class="uni-list" @change="styleChange">
					<view v-for="item in payMethod" :key="item.id" class="uni-list-item">
						<view class="uni-list-item__container">
							<view class="uni-list-item__content">
								<text class="uni-list-item__content-title">{{ item.name }}</text>
							</view>
							<view class="uni-list-item__extra">
								<radio :value="item.id" :checked="item.checked" />
							</view>
						</view>
					</view>
				</radio-group>
			</uni-section>
		</view>
		<view class="processOrderPart">
			<view class="part1">应付￥ {{total}}</view>
			<view class="part2" @click="preparePay">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.selUserAddr();
			this.selPayMethod();

			var data = uni.getStorageSync('selectedList') //取出缓存数据
			var res = JSON.parse(data)
			// console.log(res);
			this.goodList = res;
			uni.removeStorageSync('selectedList')
			//var data = uni.getStorageSync('selectedList') //销毁缓存数据

			this.calcDiscounts(); // 计算金额
		},
		data() {
			return {
				selectedId: null,
				addrList: [],
				pay: 0,
				total: 0,
				goodList: [],
				payMethod: [],
				address: {},
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'
			};
		},
		methods: {
			selectRow(id) {
				this.selectedId = id;
				this.addrList.forEach(e => {
					if (e.id == this.selectedId) {
						this.address = e;
					}
				})
				// uni.setStorageSync("addressId", this.selectedId);
				// console.log(this.selectedId);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			selectedUserAddr() {
				// console.log("选择地址");
				// uni.navigateTo({
				// 	url: "/pages/userAddress/userAddress"
				// })
			},
			calcDiscounts() { // 计算优惠卷 的优惠 情况
				// console.log(JSON.stringify(this.goodList));
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/calcDiscounts',
					method: 'POST',
					header: {
						"authority": jwt,
						'content-type': 'application/json', // 设置为JSON格式
					},
					data: this.goodList,
					success: (res) => {
						// console.log(res);
						if (res.data.code == 200) {
							this.total = res.data.data.total;
							if (res.data.data.isUse == true) {
								uni.showToast({
									title: "优惠卷已生效",
									icon: 'success'
								})
							}
						}
					}
				})
			},
			preparePay() {
				if (this.pay == 0) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'error'
					})
					return;
				}
				this.goodList.forEach(e => {
					e.addressId = this.selectedId;
					e.payMethod = this.pay;
				})
				// console.log(this.goodList);
				if (this.goodList[0].addressId == null) {
					uni.showToast({
						title: "请选择地址",
						icon: 'error'
					})
					return;
				}
				// console.log(this.goodList);
				// 下单
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/placeAnOrder',
					method: 'POST',
					header: {
						"authority": jwt
					},
					data: this.goodList,
					success: (res) => {
						console.log(res);
						if (res.data.code == 10010) {
							uni.showToast({
								title: res.data.data + "库存不足",
								icon: 'error'
							})
							return;
						} else if (res.data.code == 3005) {
							uni.showToast({
								title: "余额不足,请稍后再试",
								icon: 'error'
							})
							return;
						} else {
							let item = JSON.stringify(res.data.data);
							uni.setStorageSync('orderAndCoupon', item);
							uni.navigateTo({
								url: "/pages/payment/payment?total=" + this.total
							})
						}

					}
				})

			},
			selPayMethod() {
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/selPayMethod',
					method: 'GET',
					header: {
						"authority": jwt
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.payMethod = res.data.data;
						}
					}
				})
			},
			selUserAddr() {
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: 'api/appuser/selUserAddr',
					method: 'GET',
					header: {
						"authority": jwt
					},
					success: (res) => {
						// console.log(res);
						if (res.data.code == 200) {
							this.addrList = res.data.data;
							for (var i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].defaultAddress == 1) {
									this.selectedId = res.data.data[i].id;
									this.address = res.data.data[i];
								} else {
									this.address = res.data.data[0];
									this.selectedId = res.data.data[0].id;
								}
							}
						}
					}
				})
			},
			styleChange(e) {
				// console.log(e)
				this.pay = e.detail.value;
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f6;
	}

	.addressPart {
		width: 750rpx;
		height: 200rpx;
		background-color: #fff;
		margin-top: 30rpx;
		line-height: 200rpx;


		.addInner1 {
			float: left;
			margin-left: 15rpx;

			.text1 {
				font-size: 35rpx;
				line-height: 120rpx;
				margin-top: 15rpx;
			}

			.text2 {
				font-size: 30rpx;
				line-height: 0rpx;
			}
		}

		.addInner2 {
			float: right;
		}
	}

	.processOrderPart {
		position: fixed;
		bottom: var(--window-bottom);
		height: 130rpx;
		width: 750rpx;
		line-height: 130rpx;

		// background-color: gainsboro;
		.part1 {
			font-size: 35rpx;
			float: left;
			margin-left: 200rpx;
		}

		.part2 {
			float: left;
			text-align: center;
			width: 250rpx;
			height: 130rpx;
			border-radius: 70rpx;
			background-color: #32bb7b;
			color: #fff;
			font-size: 40rpx;
			margin-left: 40rpx;
		}
	}



	// ---------
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
		margin-top: 20rpx;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
</style>